<template>
  <div class="upload-status-panel">
    <el-upload class="uploader-status"
    drag :show-file-list="false"
       :http-request="addFile"
       :before-upload="beforeUpload"
       :accept="proxy.videoAccept"
    >
    <div class="upload-handler">
      <div class="iconfont icon-upload"></div>
      <div class="info">拖拽到此处也可上传</div>
      <div class="upload-btn">上传视频</div>
    </div>
    </el-upload>
  </div>
</template>
<script setup>
import {getCurrentInstance} from "vue";
import {useRoute, useRouter} from "vue-router";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
</script>

<style scoped lang="scss">
.upload-status-panel{
  padding: 15px 0;
  width: 830px;
  margin: 0 auto;
  .uploader-status{
    width: 830px;
    height: 280px !important;
    border: 2px dashed #ccc;
    :deep(.el-upload-dragger){
      border: none;
      height: 269px;
    }
    .upload-handler{
      color: #999;
      padding: 25px 0;
      .icon-upload{
        font-size: 30px;
      }
      .info{
        margin: 20px 0;
      }
      .upload-btn{
        color: #fff;
        margin: 20px auto;
        width: 200px;
        height: 44px;
        cursor: pointer;
        background: #00a1d6;
        border-radius: 4px;
        transition: background-color .3s ease;
        text-align: center;
        line-height: 40px;
        &:hover{
          opacity: .8;
        }
      }
    }
  }
}
</style>